<template>
  <div class="mb-3">
    <label for="exampleFormControlInput1" class="form-label"
      >Email address</label
    >
    <input
      type="text"
      class="form-control"
      id="exampleFormControlInput1"
      placeholder="content"
      :value="inputRef.value"
      @input="updateValue"
    />
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive } from 'vue'

// 如果我现在将input框改为 checkbox radio
export default defineComponent({
  props: {
    value: String
  },
  setup(props, context) {
    const inputRef = reactive({
      value: props.value || ''
    })

    const updateValue = (e: KeyboardEvent) => {
      // ts断言
      const target = e.target as HTMLInputElement
      inputRef.value = target.value
      // update:modelValue input
      context.emit('update:modelValue', target.value)
    }
    return {
      inputRef,
      updateValue
    }
  }
})
</script>
